<!-- 下拉选择器 -->
<template>
	<div style="width: 100%;height: 100%;position: relative;display: flex;box-sizing: border-box;" ref="selectHeight">
		<div class="abc" @click.stop="select">
			<div class="txt" :style="label=='请选择'?'color:#fff;':''">{{label}}</div>
			<div class="el-icon-caret-bottom iconcolor" v-show="!liststate"></div>
			<div class="el-icon-caret-top iconcolor" v-show="liststate"></div>
		</div>
		<transition name="el-zoom-in-top">
			<div class="list" v-show="liststate">
				<div style="white-space:nowrap;" :class="['item',item.selected?'hover':'',item.choose?'choose':'']" @mouseout="itemMouseout" @mouseover="itemMouseover(item.value)" v-for="item in List" @click.stop="itemChange(item.value)">{{item.label}}</div>
				<div v-if="List.length == 0" class="item" style="text-align: center;">无数据</div>
			</div>
		</transition>
	</div>
</template>

<script>
	export default{
		props:{
			value:{

			},
			itemList:{
				type:Array,
			},
			place:{
				type:String,
				default:'请选择'
			}
		},
		data(){
			return{
				liststate:false,
				xuanzhong:false,
				label:'请选择',
				List:[],
			}
		},
		watch:{
			itemList:{
				handler(newValue, oldValue){
					if(newValue){
						newValue.forEach((e) =>{
							e.selected = false
							e.choose = false
							if(this.value == e.value){
								e.choose = true
								this.label = e.label
							}
						})
						this.List = newValue
					}
				},
				immediate: true
			},
			value(newValue, oldValue){
				let i = 0
				this.List.forEach((e) =>{
					if(e.value == newValue){
						e.choose = true
						this.label = e.label
						i++
					}else{
						e.choose = false
					}
				})
				if(i == 0){
					this.label = '请选择'
				}
				//this.label = newValue
				// if(newValue == ''){
				// 	this.label = ''
				// }
			}
		},
		created() {
			if(this.label == '请选择'){
				this.label = this.place
			}
		},
		methods:{
			select(){
				this.liststate = !this.liststate
				if (!this.liststate){
					this.guanbi()
				}
			},
			itemMouseover(index){
				let list = JSON.parse(JSON.stringify(this.List))
				list.forEach((e)=>{
					if(e.value == index){
							e.selected=true
						}
				})
				this.List = list
			},
			itemMouseout(){
				this.List.forEach((e)=>{
					e.selected = false
				})
			},
			itemChange(index){
				this.List.forEach((e)=>{
					e.choose = false
					if(e.value == index){
						e.choose = true
						this.label = e.label
						this.$emit('input',e.value)
					}
				})
				this.liststate = false
			},
			guanbi(){
				console.log(this.liststate);
				if (this.liststate){
					console.log('111');
					this.liststate = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.abc{
	width: 100%;
	height: 100%;
	// border: #0091FF 1px solid;
  	padding: -1px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	cursor: pointer;
	background-color: rgba(1, 35, 118,0.2);
}
.list{
	position: absolute;
	width: 100%;
	border-radius: 4px;
	background-color: rgba(1, 35, 118,0.2);
	box-shadow: inset 0px 1px 10px 0px rgba(75, 137, 255, 0.5);
	top: 120%;
	overflow: auto;
	z-index: 999999;
	max-height: 9.375rem;
	color: #fff;
}
.item{
	// white-space: nowrap;
	// overflow: hidden;
	// text-overflow: ellipsis;
	color: #FFFFFF;
	padding: 4% 8%;
	cursor: pointer;
	font-size: 0.75rem;
	text-align: left;
}
.hover{
	background-color: rgba(1, 35, 118,0.6);
}
.choose{
	color: #fff;
}
// .list::before{
// 	content: "";
// 	display: block;
// 	position: absolute;
// 	left: 20%;
// 	top: -40px;
// 	border: 10px solid #FFFF4F;
// 	border-left: 10px solid transparent;
// 	border-right: 10px solid transparent;
// 	border-top: none;
// }
.iconcolor{
	color: #FFFFFF;
}
.txt{
	width: 90%;
	padding: 0 5%;
	box-sizing: border-box;
	color: #FFFFFF;
	font-size: 0.875rem;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
</style>
